<template>
  <div style="margin-right: 12px">
    <a-space>
      <!-- <a style="padding: 0 12px; display: inline-block; user-select: none" @click="handleClick"><BgColorsOutlined /></a> -->
      <a-dropdown>
        <template #overlay>
          <a-menu>
            <!-- <a-menu-item>
              <template #icon>
                <SettingOutlined />
              </template>
              <span>个人设置</span>
            </a-menu-item> -->
            <a-menu-item @click="handleLogout">
              <template #icon>
                <LogoutOutlined />
              </template>
              <span>退出登录</span>
            </a-menu-item>
          </a-menu>
        </template>
        <a-avatar shape="square" size="small">
          <template #icon>
            <UserOutlined />
          </template>
        </a-avatar>
      </a-dropdown>
      <span style="color: #fff">{{ userStore.loginName }}</span>
    </a-space>
  </div>
</template>

<script setup lang="ts">
import {
  UserOutlined,
  // SettingOutlined,
  LogoutOutlined,
  // BgColorsOutlined
} from '@ant-design/icons-vue';
// import { apply, randomTheme } from '../../hooks/useTheme';
import { useUserStore } from '@/store';

export type CurrentUser = {
  nickname: string;
  avatar?: string;
};

const userStore = useUserStore();

defineProps<{
  currentUser: CurrentUser;
}>();

// const handleClick = () => {
//   apply(randomTheme());
// };

const handleLogout = async () => {
  try {
    await userStore.logout();
    window.location.href = '/';
  } catch (err: any) {
    console.log('🚀 ~ handleLogout ~ error:', err);
  }
};
</script>
